<template>
<div class="">
 <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="关键字">
    <el-input v-model="formInline.keyword" placeholder="根据文章标题搜索"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="formInline.state" placeholder="请选择">
      <el-option label="启用" value="1"></el-option>
      <el-option label="禁用" value="0"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button @click="empty">清除</el-button>
    <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>
  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
  <el-button type="success" style="float: right; padding:" icon="el-icon-edit" @click="newtips">新增技巧</el-button>
  <ArticlesAdd   @closeShowPreview='closeShowPreview' :isShowPreview='isShowPreview' :curentId='curentId' :AmodifyList='AmodifyList'/>
</el-form>
    </span>
     <el-alert
    :title="`数据一共${total}条`"
    type="info"
     :closable="false"
    show-icon>
  </el-alert>

  </div>
  <div  class="text item">
   <el-table
    :data="personnelList.items"
    border
    style="width: 100%">

    <el-table-column
      fixed
      type="index"
      label="序号"
      width="150">
    </el-table-column>

    <el-table-column
      label="文章标题"
      width="190">
     <template #default='{row}'>
      <span>{{row.title}}</span>
      <span
      v-if="row.videoURL"
      @click="checkVideoURL(row.videoURL)"
      class="el-icon-film"></span>
     </template>
    </el-table-column>

    <el-table-column
      prop="visits"
      label="阅读数"
      width="120">
    </el-table-column>

    <el-table-column
      prop="username"
      label="录入人"
      >
    </el-table-column>

    <el-table-column
      prop="createTime"
      label="录入时间"
      width="120">
       <template #default='{row}'>
        {{loadTime(row.createTime)}}
      </template>
    </el-table-column>

    <el-table-column
      prop="state"
      label="状态"
      width="150"
      >
      <template #default='{row}'>
        {{getstate(row.state)}}
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
     >
      <template #default="scope" >
        <el-button  type="text" size="small" @click="preView(scope.row.id)" class="btnTex">预览</el-button>

        <el-button type="text" size="small" @click='statebtn(scope.row)' class="btnTex">{{scope.row.state === 1 ? '禁用':'启用'}}</el-button>

        <el-button type="text" size :disabled="scope.row.state !==1" @click="modifyList(scope.row.id)" >修改</el-button>
        <el-button type="text" size @click="delarticle(scope.row.id)" :disabled="scope.row.state !==1" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <ArticlesPreview :showDialog='showDialog' :curentId='curentId' @closeSelectedTag='closeSelectedTag'/>
  </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change='changePage'
            :cuttent-page.sync='params.page'
            :page-sizes="[5,10,15,20]"
            :page-size='params.pagesize'
            layout="prev, pager, next,jumper,sizes"
            :total="total"
            class='pagenumber'
            background
            >

        </el-pagination>
          <!-- //外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗 -->
      <div class="videoContainer" v-if="videoState == true" @click="masksCloseFun">
        <div class="close el-icon-close" @click="masksCloseFun" ></div>
      <!-- //弹窗 -->
        <div class="videomasks" v-if="videoState == true">
            <!-- //视频：h5的视频播放video -->
            <video :src="videoUrl" controls="controls" autoplay class="video">
             <!-- 您的浏览器不支持 video 标签。 -->
        </video>
      </div>
      </div>
</el-card>

</div>

</template>
<script>
import { list, remove, changeState, detail } from '@/api/hmmm/articles.js'
import ArticlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
import { parseTime } from '@/utils/index.js'
export default {
  data () {
    return {
      formInline: {
        keyword: null,
        state: null
      },
      params: {
        page: 1,
        pagesize: 10

      },
      total: 0, // 总条数
      personnelList: [],
      showDialog: false, // 预览弹窗状态
      isShowPreview: false, // 新增技巧弹窗状态
      curentId: 0, // 记录当前操作的id
      AmodifyList: {}, // 修改
      videoState: false, // 视频弹出状态
      videoUrl: '' // 视频地址
    }
  },
  components: {
    ArticlesPreview,
    ArticlesAdd
  },
  mounted () {
    this.articleList()
    // if (this.personnelList.state === 1) {
    //   this.isAble = false
    // } else if (this.personnelList.state === 0) {
    //   this.isAble = true
    // }
  },
  methods: {
    loadTime (t) { // 时间转换
      return parseTime(t)
    },
    closeShowPreview () { // 关闭新增弹窗
      this.isShowPreview = false
      this.articleList()
    },
    openShowPreview () { // 打开新增弹窗
      this.isShowPreview = true
    },
    async articleList () { // 获取数据
      const res = await list(this.params)
      // console.log(res)
      this.total = res.data.counts
      this.personnelList = res.data
      // 获取总条数
      // console.log(this.total)
    },
    getstate (s) { // 状态显示
      const state = {
        1: '启用',
        0: '禁用'
      }
      return state[s]
    },
    changePage (newPage) { // 页码
      this.params.page = newPage
      this.articleList()
    },
    preView (id) { // 预览
      this.curentId = id
      console.log(this.curentId)
      this.showDialog = true
    },
    newtips () { // 新增技巧弹窗
      // this.curentId = id

      this.isShowPreview = true
    },
    closeSelectedTag () { // 预览弹窗 关闭
      this.showDialog = false
      this.articleList()
    },
    delarticle (id) { // 删除
      // console.log(id)
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.params.page !== 1 && this.personnelList.length <= 1) {
          this.params.page -= 1
          this.articleList()
        }

        await remove({ id: id })
        // this.$message.success('删除成功')
        this.articleList() // 调用获取数据方法
        console.log(this.personnelList)
        this.$message({

          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    statebtn (row) { // 更改状态
      console.log(row)
      if (row.state === 1) {
        changeState({ id: row.id, state: 0 })
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      } else {
        changeState({ id: row.id, state: 1 })
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }
      this.articleList()
    },
    async modifyList (id) { // 修改
      const res = await detail({ id: id })
      console.log(res)
      this.AmodifyList = res.data
      this.isShowPreview = true
    },
    async onSubmit () { // 搜索 确定按钮
      if ((this.formInline.keyword === null && this.formInline.state === null) || (this.formInline.keyword === null || this.formInline.state === null)) {
        this.$message({
          type: 'error',
          message: '关键字或状态未填'
        })
      } else {
        const res = await list({ keyword: this.formInline.keyword, state: this.formInline.state })
        console.log(res.data.items.length)
        this.total = res.data.items.length // 将获取到的数据长度 给总条数total
        this.personnelList = res.data
      // console.log(res.data.items)
      // console.log(this.personnelList)
      }
    },
    empty () { // 清空搜索框
      this.formInline.keyword = null
      this.formInline.state = null

      this.articleList() // 获取数据 重新渲染页面
    },
    handleSizeChange (val) { // 每页显示条数
      this.params.pagesize = val
      // console.log(this.params.pagesize)

      this.articleList() // 获取数据方法
    },
    checkVideoURL (videos) { // 点击播放
      this.videoState = true
      this.videoUrl = videos
    },
    masksCloseFun () { // 关闭弹出层
      this.videoState = false
    }

  }

}
</script>

<style scoped lang="scss">
.btnTex {
  font-size:14px
}
.title{

  padding: 20px 20px 0 20px;
}
.box-card {
  margin-top: 20px;
  margin-right:10px;

}
.page {
  float: right;
  margin-top: 30px;
}
 .pagenumber{
   float: right;
 }

 .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  margin: 12px 10px 0;
}
.block {
  float: right;
}
.el-icon-film {
  color: blue;
  font-size:18px;
  padding-left: 5px;
}
.videoContainer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    cursor: pointer
  }
  .videomasks {
      width: 800px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      .video {
        width: 100%;
        height: 100%;
      }
  }
  .el-icon-close {
    font-size: 25px;
  }
}
</style>
